<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 430px;
			height: 300px;
			background: skyblue;
			overflow: hidden;
		}
		.box div{
			width: 100px;
			height: 100px;
			background: pink;
			float: left;
			margin-right:10px ;
			margin-bottom: 10px;
			text-align: center;
			line-height: 100px;
		}
		.box div:nth-child(4n){
			margin-right: 0;
		}

		.anim{
			margin-top: -110px;
			transition: all 0.5s;
		}
	</style>
</head>
<body>
<div class="box">
</div>

<script type="text/javascript">
	let list =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
	let box = document.querySelector('.box')

	// 将20个小div渲染到页面上
	function dom() {
		for(let i = 0;i < list.length;i++){
			// let div = document.createElement('div')
			box.innerHTML += `<div>${list[i]}</div>`
		}
	}
	dom()

	let time = null
	function fn() {
		time = setInterval(function() {
			//将数组的前四个放到数组的最后
			for(let i = 0;i < 4; i++){
				list.push(list[i])
			}
			// 删除数组前四个
			list.splice(0,4)
			console.log(list)

			//给前四个加上推的效果
			let item = document.querySelectorAll('.box div')
			for(let i = 0; i < 4; i++){
				item[i].className = 'anim'
			}

			//等待过渡之后 重新渲染页面
			setTimeout(function() {
				box.innerHTML = ''
				//重新渲染页面
				dom()
			},500)
			
		},3000)
	}
	fn()
</script>
</body>
</html>